<template>
  <el-form>
    <el-form-item style="display: flex;">
      <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('系统银行卡类型') }} ：</p>
      <!-- <el-input style="width: 400px;" v-model="form.address"></el-input> -->
      <el-select slot="prepend" v-model="selectedBankType" placeholder=""
        style="width: 400px;height: 30px; background-color: black; color: white; border: none;"
        @change="handleBankTypeChange" disabled>
        <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item style="display: flex;">
      <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('账号') }} ：</p>
      <el-input style="width: 400px;" v-model="form.address"></el-input>
    </el-form-item>


    <div v-if="showAccountDetails && selectedBankTypeIsBank">
      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('持卡人') }} ：</p>
        <el-input style="width: 400px;" v-model="form.bankname"></el-input>
      </el-form-item>
      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('银行名称') }}：</p>
        <el-input style="width: 400px;" v-model="form.bank"></el-input>
      </el-form-item>
      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('银行地址') }}：</p>
        <el-input style="width: 400px;" v-model="form.bankaddr"></el-input>
      </el-form-item>

      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('持卡人地址') }}：</p>
        <el-input style="width: 400px;" v-model="form.bankuseraddr"></el-input>
      </el-form-item>
      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('SWIFTCODE') }}：</p>
        <el-input style="width: 400px;" v-model="form.bankcode"></el-input>
      </el-form-item>
    </div>
  </el-form>
  <span class="dialog-footer" style="display: flex;justify-content: center;">
    <div
      style="width: 80px;height: 30px;border-radius:5px ;background-color: #f6d39c;display: flex;justify-content: center;align-items: center;margin-right: 10px;"
      @click="cancelClicked">
      <el-icon style="font-size: 16px;margin-right: 5px;color: black;">
        <Back />
      </el-icon>
      <span style="color: black;">{{ $t('取消') }}</span>
    </div>
    <div
      style="width: 80px;height: 30px;border-radius:5px ;background-color: #f6d39c;display: flex;justify-content: center;align-items: center;"
      @click="AddBank">
      <el-icon style="font-size: 16px;margin-right: 5px;color: black;">
        <DocumentCopy />
      </el-icon>
      <span style="color: black;">{{ $t('保存') }}</span>
    </div>
  </span>
</template>
    
<script >
import { BankListApi, addBankApi, getWalletApi, BankdetailApi } from "@/api/index";
export default {
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  watch: {
    userId(newUserId) {
      console.log('userId changed:', newUserId);
      this.getWallet();
      this.showUpdateDrawer(newUserId);
    }
  },

  data() {
    return {
      dialog: false,
      dialog2: false,
      isEnabled: true,
      iconType: 'CloseBold',
      form: {
        channel_id: '',
        address: '',
        bankname: '',
        bank: '',
        bankaddr: '',
        bankuseraddr: '',
        bankcode: '',
        channel_name: ''
      },
      updateDrawerId: null,
      selectedBankType: '',
      showAccountDetails: true,
      selectDisabled: false, // 添加这个变量
      options: [],
      pageData: [],
      tableData: [
      ],
    };
  },
  methods: {
    cancelClicked() {
      this.$emit('close'); // 触发自定义事件'close'
    },


    handleBankTypeChange() {
      const selectedBank = this.options.find(item => item.id === this.selectedBankType);
      if (selectedBank && selectedBank.is_bank === 1) {
        this.showAccountDetails = true;
      } else {
        this.showAccountDetails = false;
      }
    },

    /* 获取钱包类型 */
    getWallet() {
      const token = localStorage.getItem('token')
      const params = {
        token: token,
        type: '0'
      }
      getWalletApi(params).then(res => {
        this.options = res.data
        console.log(this.options, '银行卡类型')
      })
    },

    /*获取银行卡详情 编辑银行卡信息 */
    async showUpdateDrawer(id) {
      console.log("This item's id:", id);
      const token = localStorage.getItem('token');
      const params = { token: token, id: id };

      try {
        const res = await BankdetailApi(params);
        this.form = res.data;
        this.selectedBankType = res.data.channel_id;
        console.log(this.selectedBankType, "11111");
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },


    /* 添加银行卡 */
    AddBank() {
      const token = localStorage.getItem('token')
      this.form.token = token
      this.form.channel_id = this.selectedBankType;
      console.log(this.form.channel_id, '这项的channel_id')
      addBankApi(this.form).then(res => {
        console.log(res);
        //this.$message(res.msg)
        if(res.code===1){
            this.$message.success(res.msg)   
            this.$emit("save");
        }
        if(res.code===0){
          this.$message.error(res.msg)
        }
      })
    },
  },
  mounted() {
  console.log('Received userId:', this.userId);
  this.getWallet();
  this.showUpdateDrawer(this.userId);
},
  computed: {
    selectedBankTypeIsBank() {
      const selectedBank = this.options.find(item => item.id === this.selectedBankType);
      return selectedBank && selectedBank.is_bank === 1;
    }
  }

}
</script>
    
<style lang="scss" scoped>
:deep(.el-input__inner) {
  color: #fff !important;
}

:deep(.el-input__wrapper) {
  background-color: black;
  box-shadow: none;
}
:deep(.el-select.is-disabled .el-input){
  background-color: black !important;
  color: white !important;
}
:deep(.el-select.is-disabled .el-input__inner){
  background-color: black !important;
  color: white !important;
}
:deep(.el-select.is-disabled .el-input__inner:hover){
  background-color: black !important;
  color: white !important;
}

</style>
    